<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>小区管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="margin-top: 10px">
      <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input
            v-model="queryInfo.communityName"
            placeholder="小区名称"
            clearable
            @clear="clearInput"
          ></el-input>
        </el-form-item>

        <span class="demonstration">创建时间:</span>
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="datevalue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-right: 20px"
        >
        </el-date-picker>

        <el-form-item>
          <el-button type="primary" @click="communityList">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="add">新增小区</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table :data="communityData" style="width: 100%; margin-top: 10px">
      <el-table-column
        v-model="communityId2"
        prop="communityId"
        label="ID"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="communityName" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="communityAddress" label="位置"> </el-table-column>
      <el-table-column prop="communityUserCount" label="用户量" width="180">
      </el-table-column>
      <el-table-column prop="communityShopCount" label="关联门店" width="180">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="chakan(scope.row)"
            >查看关联门店</el-button
          >

          <el-button type="text" @click="updateCommnuity(scope.row)"
            >修改小区</el-button
          >
          <el-button type="text" @click="deleteRow(scope.row.communityId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="newtotal"
      :current-page="queryInfo.pageNum"
      :page-size="queryInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
    >
    </el-pagination>
    <!-- 对话框 -->

    <el-dialog
      :title="biaotou"
      :visible.sync="dialogFormVisible"
      label-width="80px"
      @close="quxiao"
    >
      <el-form :model="addCommunity">
        <el-form-item label="门店名称" label-width="100px">
          <el-input
            v-model="addCommunity.communityName"
            style="width: 220px"
          ></el-input>
        </el-form-item>

        <el-form-item label="所属地区" label-width="100px">
          <el-cascader v-model="adress" :options="citys"></el-cascader>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-input
            v-model="addCommunity.communityAddress"
            placeholder="输入详细地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="门店坐标" label-width="100px">
          <el-button @click="getLocation">SOS专业定位</el-button>
          <span
            >{{ addCommunity.communityLatitude }},{{
              addCommunity.communityLongitude
            }}</span
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="baocun">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看关联门店的对话框 -->
    <el-dialog title="查看关联门店" :visible.sync="dialogTableVisible_2">
      <el-row>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 220px; margin-right: 15px"
        ></el-input>

          <el-button>搜索</el-button>
          <el-button @click="tianjia()">添加关联门店</el-button>
      </el-row>
      <el-table :data="mendianlist">
        <el-table-column
          property="shopId"
          label="序号"
          width="110"
        ></el-table-column>
        <el-table-column
          property="shopName"
          label="名称"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopId"
          label="ID"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopGoodsList"
          label="排序"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopAddress"
          label="地址"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopOrderCount"
          label="订单数量"
          width="110"
        ></el-table-column>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="newtota2"
          :current-page="queryInfomendian.pageNum"
          :page-size="queryInfomendian.pageSize"
          :page-sizes="[5, 10, 15, 20]"
        >
        </el-pagination>
      </el-table>
    </el-dialog>

    <!-- 添加关联门店 -->
    <el-dialog title="查看关联门店" :visible.sync="dialogTableVisible_3">
      <el-row>
        <el-input
          v-model="input2"
          placeholder="请输入内容"
          style="width: 220px; margin-right: 15px"
        ></el-input>

        <el-button size="medium">搜索</el-button>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="mendianlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          property="shopId"
          label="序号"
          width="110"
        ></el-table-column>
        <el-table-column
          property="shopName"
          label="名称"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopId"
          label="ID"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopGoodsList"
          label="排序"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopAddress"
          label="地址"
          width="110"
        ></el-table-column>

        <el-table-column
          property="shopOrderCount"
          label="订单数量"
          width="110"
        ></el-table-column>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="newtota2"
          :current-page="queryInfomendian.pageNum"
          :page-size="queryInfomendian.pageSize"
          :page-sizes="[5, 10, 15, 20]"
        >
        </el-pagination>
      </el-table>

    >
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="baocun3()">保存</el-button>
    
    </el-dialog>
  </div>
</template>



<script scoped>
import citys from "../assets/citydata.js";
export default {
  data() {
    return {
      // 添加关联门店
      dialogTableVisible_3: false,
      input2: "",
      tianjialist: [],
      multipleSelection: [],
      id:null,
      // checked: false,

      // 查看关联门店数据
      dialogTableVisible_2: false,
      queryInfomendian: {
        pageNum: 1,
        pageSize: 5,
        shopName: "",
        communityId: 0,
      },
      mendianlist: [],
      communityId2: null,
      newtota2: 0,
      input: "",

      // ----------------------------------
      biaotou: "",
      adress: [],
      citys: citys,
      addCommunity: {
        addOrUpdateFlag: 1,
        communityName: "",
        communityAddress: "",
        communityAreaCode: "",
        communityCity: "",
        communityCoordinates: "",
        communityDistrict: "",
        communityId: "",
        communityLatitude: "",
        communityLongitude: "",
        communityProvince: "",
      },
      dialogFormVisible: false,
      queryInfo: {
        communityName: "",
        startTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 5,
      },
      newtotal: 0,
      datevalue: "",
      communityData: [],
    };
  },
  methods: {
    baocun3() {
      this.$http
        .post("http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/addAssociatedStores", {
          fendeShopCommunityList: this.multipleSelection,
          panghuCommunityId: this.id,
        })
        .then()
        .catch((error) => {
          this.$message.error("请求错误");
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection=[];
      // this.multipleSelection = selection.msp(item=> item.shopId);
       val.forEach(e=>{
        this.multipleSelection.push(e.shopId)
       })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    tianjia() {
      this.dialogTableVisible_3 = true;
      let params = this.queryInfomendian;
      params.communityId = this.id;
      this.$http
        .get("associatedStores/findShopListByAdd", { params })
        .then((res) => {
          this.tianjialistt = res.data.data.list;
          this.newtota3 = res.data.data.total;
        })
        .catch((error) => {
          this.$message.error("请求错误");
        });
    },

    chakan(row) {
      this.dialogTableVisible_2 = true;
      let params = this.queryInfomendian;
      params.communityId = row.communityId;
      this.$http
        .get("associatedStores/associatedStoresList", { params })
        .then((res) => {
          this.mendianlist = res.data.data.list;
          this.newtota2 = res.data.total;
          this.id=row.communityId;
        })
        .catch((error) => {
          this.$message.error("请求错误");
        });
    },

    deleteRow(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("community/communityRemove", { communityId: id })
            .then((res) => {
              if (res.data.status == 200) {
                this.$message.success("我真的会谢,删除成功");
                this.communityList();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((error) => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateCommnuity(info) {
      this.dialogFormVisible = true;
      this.addCommunity = info;
      this.biaotou = "修改信息";
      this.addCommunity.addOrUpdateFlag = 2;
      this.adress = [
        this.addCommunity.communityProvince,
        this.addCommunity.communityCity,
        this.addCommunity.communityDistrict,
      ];
    },

    add() {
      this.dialogFormVisible = true;
      this.biaotou = "新增小区";
      this.addCommunity.addOrUpdateFlag = 1;
    },
    baocun() {
      this.$http
        .post("community/communityUpdate", this.addCommunity)
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.communityList();
            this.quxiao();
          }
        })
        .catch((error) => {
          this.$message.error("接收不到信息");
        });
    },
    quxiao() {
      this.dialogFormVisible = false;
      this.adress = [];
      this.addCommunity = {
        addOrUpdateFlag: 1,
        communityName: "",
        communityAddress: "",
        communityAreaCode: "",
        communityCity: "",
        communityCoordinates: "",
        communityDistrict: "",
        communityId: "",
        communityLatitude: "",
        communityLongitude: "",
        communityProvince: "",
      };
    },
    getLocation() {
      this.$http
        .get("https://restapi.amap.com/v3/geocode/geo", {
          params: {
            key: "457886b5972a97e93fb9cdccebfd450f",
            address:
              this.communityData.communityProvince +
              this.communityData.communityCity +
              this.communityData.communityDistrict +
              this.communityData.communityAddress,
          },
        })
        .then((rep) => {
          if (rep.data.status == 1) {
            let location = rep.data.geocodes[0].location;
            this.addCommunity.communityLatitude = location.split(",")[0];
            this.addCommunity.communityLongitude = location.split(",")[1];
          }
        })
        .catch((error) => {
          this.$message.error("请求错误");
        });
    },
    clearInput() {
      this.communityList();
    },
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.queryInfo.pageNum = 1;
      this.communityList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.communityList();
    },
    communityList() {
      this.$http
        .get("community/communityList", {
          params: this.queryInfo,
        })
        .then((respond) => {
          if (respond.data.status == 200) {
            this.communityData = respond.data.data.list;
            this.newtotal = respond.data.data.total;
          } else {
            this.$message.error("回应错了");
          }
        })
        .catch((error) => {
          this.$message.error("请求错误");
        });
    },
  },
  mounted() {
    this.communityList();
  },
  watch: {
    datevalue() {
      this.queryInfo.startTime = this.datevalue[0];
      this.queryInfo.endTime = this.datevalue[1];
    },
    adress() {
      this.communityData.communityProvince = this.adress[0];
      this.communityData.communityCity = this.adress[1];
      this.communityData.communityDistrict = this.adress[2];
    },
  },
};
</script>

<style>
</style>